<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>物业管理系统</title>
    <!-- 引用header的 HTML 代码片段 -->
    <div th:replace="~{fragments/header :: header}">...</div>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <!-- 引用menu的 HTML 代码片段 -->
        <div th:replace="~{fragments/menu :: menu}">...</div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <!-- 引用nav的 HTML 代码片段 -->
        <div th:replace="~{fragments/nav :: nav}">...</div>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
        <!-- <div class="card-header"><h4>首页管理</h4></div>-->
            <div class="container-fluid">
                <!--卡片组-->
                <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-primary">
                            <div class="card-body clearfix">
                                <div class="pull-right margin-right-1">
                                    <p class="h5 text-white m-t-0">业主</p>
                                    <p class="h3 text-white m-b-0">169 位</p>
                                </div>
                                <div class="pull-left margin-left-1"><span
                                        class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-danger">
                            <div class="card-body clearfix">
                                <div class="pull-right margin-right-1">
                                    <p class="h5 text-white m-t-0">公告</p>
                                    <p class="h3 text-white m-b-0">22 条</p>
                                </div>
                                <div class="pull-left margin-left-1"><span
                                        class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-success">
                            <div class="card-body clearfix">
                                <div class="pull-right margin-right-1">
                                    <p class="h5 text-white m-t-0">投诉</p>
                                    <p class="h3 text-white m-b-0">34 条</p>
                                </div>
                                <div class="pull-left margin-left-1"><span
                                        class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-arrow-down-bold fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-purple">
                            <div class="card-body clearfix">
                                <div class="pull-right margin-right-1">
                                    <p class="h5 text-white m-t-0">维修</p>
                                    <p class="h3 text-white m-b-0">153 项</p>
                                </div>
                                <div class="pull-left margin-left-1"><span
                                        class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--环装图-->
                <div class="" style="display: flex;flex-direction: row;justify-content: space-between;">
                    <div class="card" style="width: 400px;height: 500px;">
                        <div class="card-header"><h4>房屋统计图</h4></div>
                        <div class="card-body" style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <canvas id="chart-doughnut" width="350" height="350"
                                    style="display: block; height: 300px; width: 300px;"></canvas>
                        </div>
                        <div class="" style="margin-top: 20px;display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                            <div style="display: flex;flex-direction: column;">
                                <p class="h3 text-info m-t-0">92</p>
                                <dt class="text-dark m-t-0">闲置</dt>
                            </div>
                            <div style="display: flex;flex-direction: column;">
                                <p class="h3 text-info m-t-0">96</p>
                                <dt class="text-dark m-t-0">总数</dt>
                            </div>
                        </div>
                    </div>
                    <div class="card" style="width: 400px;">
                        <div class="card-header"><h4>车位统计图</h4></div>
                        <div class="card-body" style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <canvas id="chart-doughnut2" width="350" height="350"
                                    style="display: block; height: 300px; width: 300px;"></canvas>
                        </div>
                        <div class="" style="margin-top: 20px;display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                            <div style="display: flex;flex-direction: column;">
                                <p class="h3 text-info m-t-0">58</p>
                                <dt class="text-dark m-t-0">闲置</dt>
                            </div>
                            <div style="display: flex;flex-direction: column;">
                                <p class="h3 text-info m-t-0">60</p>
                                <dt class="text-dark m-t-0">总数</dt>
                            </div>
                        </div>
                    </div>
                    <div class="card" style="width: 400px;">
                        <div class="card-header"><h4>缴费统计图</h4></div>
                        <div class="card-body" style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                            <canvas id="chart-doughnut3" width="350" height="350"
                                    style="display: block; height: 300px; width: 300px;"></canvas>
                        </div>
                        <div class="" style="margin-top: 20px;display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                            <div style="display: flex;flex-direction: column;">
                                <p class="h3 text-info m-t-0">92</p>
                                <dt class="text-dark m-t-0">未缴</dt>
                            </div>
                            <div style="display: flex;flex-direction: column;">
                                <p class="h3 text-info m-t-0">96</p>
                                <dt class="text-dark m-t-0">已缴</dt>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<!-- 引用footer的 HTML 代码片段 -->
<div th:replace="~{fragments/footer :: footer}">...</div>
<!-- 引用图表插件的 HTML 代码片段 -->
<div th:replace="~{fragments/charts :: charts}">...</div>
<script type="text/javascript">
    new Chart($("#chart-doughnut"), {
        type: 'doughnut',
        data: {
            labels: ["已住", "闲置"],
            datasets: [{
                data: [92, 4],
                backgroundColor: ['rgba(54, 162, 235, 1)', 'rgb(195,195,195)']
            }]
        },
        options: {
            responsive: false
        }
    });
    new Chart($("#chart-doughnut2"), {
        type: 'doughnut',
        data: {
            labels: ["已使用", "闲置"],
            datasets: [{
                data: [58, 2],
                backgroundColor: ['rgba(54, 162, 235, 1)',  'rgb(195,195,195)']
            }]
        },
        options: {
            responsive: false
        }
    });
    new Chart($("#chart-doughnut3"), {
        type: 'doughnut',
        data: {
            labels: ["未缴费", "已缴费"],
            datasets: [{
                data: [2,0],
                backgroundColor: ['rgba(54, 162, 235, 1)',  'rgb(195,195,195)']
            }]
        },
        options: {
            responsive: false
        }
    });
</script>
</body>
</html>